import {useState, useRef} from 'react';
import {Button, Divider, Popconfirm, message} from 'antd'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table'
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import {PlusOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import CreateAndModify from "@/pages/Network/NAS/extra/createAndModify";
import {getNasInfo, delNas} from '@/services/nas'

const Index = () => {
  const actionRef = useRef()
  const init = useModel('@@initialState');
  const [mode, setMode] = useState('create')
  const [visible, setVisible] = useState<boolean>(false)
  const [data, setData] = useState({})
  // @ts-ignore
  const {currentUser} = init.initialState
  const delNasData = (id: any) => {
    message.warn('正在删除').then()
    delNas({NasId: id}).then(res => {
      if (res.status === 200) {
        // @ts-ignore
        actionRef.current.reload()
        message.success(res.message).then()
      } else {
        message.error(res.message).then()
      }
    })
  }
  const columns = [
    {
      dataIndex: 'nasname',
      title: '对接地址',
      hideInSearch: true,
    },
    {
      dataIndex: 'shortname',
      title: '对接名称'
    },
    {
      dataIndex: 'type',
      title: '对接类型',
      hideInSearch: true,
    },
    {
      dataIndex: 'ports',
      title: '对接端口',
      hideInSearch: true,
    },
    {
      dataIndex: 'secret',
      title: '对接秘钥',
      hideInSearch: true,
    },
    {
      dataIndex: 'description',
      title: '对接描述',
      hideInSearch: true,
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      width: 200,
      render: (_: any, rowData: any) => [
        <Access key={'2'} accessible={authority('69', currentUser.operation)}>
          <a onClick={() => {
            setData(rowData)
            setVisible(true)
            setMode('modify')
          }}>修改</a>
        </Access>,
        <Divider key={'3'} type="vertical"/>,
        <Access key={'4'} accessible={authority('70', currentUser.operation)}>
          <Popconfirm title="是否删除当前NAS设备？" icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
                      onConfirm={() => {
                        delNasData(rowData.id)
                      }}>
            <a href="#">删除</a>
          </Popconfirm>
        </Access>
      ]
    }

  ]
  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={(params) => getNasInfo(params)}
        toolBarRender={() => [
          <Access key={'1'} accessible={authority('68', currentUser.operation)}>
            <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => {
              setMode('create')
              setVisible(true)
            }}>
              增加NAS
            </Button>
          </Access>
        ]}
      />
      <CreateAndModify
        data={data}
        mode={mode}
        visible={visible}
        onClose={() => {
          // @ts-ignore
          actionRef.current.reload()
          setMode('create')
          setVisible(false)
          setData({})
        }}
        onOk={() => {
          // @ts-ignore
          actionRef.current.reload()
          setMode('create')
          setVisible(false)
          setData({})
        }}

      />
    </PageHeaderWrapper>
  );
};

export default Index;
